﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Generate API Documentation for TypeScript | DocFX website </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Generate API Documentation for TypeScript | DocFX website ">
    <meta name="generator" content="docfx 2.37.0.0">
    
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../../styles/docfx.css">
    <link rel="stylesheet" href="../../styles/main.css">
    <meta property="docfx:navrel" content="../../toc.html">
    <meta property="docfx:tocrel" content="../toc.html">
    
    <meta property="docfx:rel" content="../../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../../index.html">
                <img id="logo" class="svg" src="../../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="generate-api-documentation-for-typescript">Generate API Documentation for TypeScript</h1>

<h2 id="1-prerequisite">1. Prerequisite</h2>
<ul>
<li><a href="https://dotnet.github.io/docfx/tutorial/docfx_getting_started.html#2-use-docfx-as-a-command-line-tool">DocFX</a></li>
<li><a href="https://nodejs.org/en/download/">Node.js</a> (includes npm)</li>
<li><a href="https://git-scm.com/">Git</a></li>
</ul>
<h2 id="2-steps">2. Steps</h2>
<h3 id="21-prepare-source-code">2.1 Prepare Source Code</h3>
<p>Prepare the TypeScript source code for generating document. In this tutorial, we take <a href="https://github.com/Azure/azure-iot-sdk-node/tree/master/device/core">azure-iot-device</a> as an example.</p>
<pre><code>git clone https://github.com/Azure/azure-iot-sdk-node.git
</code></pre>
<h3 id="22-generate-metadata-for-a-package">2.2 Generate Metadata for a package</h3>
<p>We use <a href="http://typedoc.org/">typedoc</a> tool and <a href="https://www.npmjs.com/package/type2docfx">type2docfx</a> to generate YAML files.</p>
<p>First, let's install the tools globally.</p>
<pre><code>npm install -g typedoc type2docfx
</code></pre>
<h4 id="221-typedoc-to-parse-source-code-into-a-json-format-output">2.2.1 TypeDoc to parse source code into a JSON format output</h4>
<p>Go to the folder where package.json file locate.
Run</p>
<pre><code>typedoc --json api.json azure-iot-sdk-node/device/core/src --module commonjs --includeDeclarations --ignoreCompilerErrors --excludeExternals
</code></pre>
<p>The parameter may differ for your needs. You can use <code>typedoc -h</code> to explore more options.</p>
<h4 id="222-type2docfx-to-extract-the-json-format-output-into-yaml-files">2.2.2 Type2docfx to extract the JSON format output into YAML files</h4>
<p>Find the output <code>api.json</code> file and run:</p>
<pre><code>type2docfx api.json yml
</code></pre>
<p>The <code>yml</code> stands for the output folder, you can specify the folder as the content publishing folder in Section 2.3. And you can explore more option by <code>type2docfx -h</code>. With <code>--sourceUrl, --sourceBranch, and --basePath</code> parameters, you can generate yaml files referencing to the source code in Github, which will help developer to find the corresponding source code easily.</p>
<div class="NOTE">
<h5>Note</h5>
<p>All sources under <code>node_modules</code> path will be automatically ignored.</p>
</div>
<h3 id="23-build-document">2.3 Build Document</h3>
<p>Create the configuration <code>docfx.json</code> for DocFX:</p>
<pre><code class="lang-json">{
  &quot;build&quot;: {
    &quot;content&quot;: [
      {
        &quot;files&quot;: [&quot;**/*.yml&quot;],
        &quot;src&quot;: &quot;yml&quot;,
        &quot;dest&quot;: &quot;api&quot;
      }
    ],
    &quot;dest&quot;: &quot;_site&quot;
  }
}
</code></pre>
<p>More information about <code>docfx.json</code> can be found in <a href="https://dotnet.github.io/docfx/tutorial/docfx.exe_user_manual.html">user manual</a>. Run:</p>
<pre><code>docfx docfx.json --serve
</code></pre>
<p>Now you can see your generated pages: <a href="http://localhost:8080/api/azure-iot-device/Client.html#azure_iot_device_Client">http://localhost:8080/api/azure-iot-device/Client.html#azure_iot_device_Client</a></p>
<h2 id="3-know-issues">3. Know issues</h2>
<ol>
<li>Some types can't link to the property correctly now. They displays in plain text and prefixed with <code>@</code>.</li>
</ol>
<div id="disqus_thread"></div>
                <script>
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://docfx-github.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            </article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="#disqus_thread" class="contribution-link">0 Comments</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            <span>Copyright © 2015-2018 Microsoft<br>Generated by <strong>DocFX</strong></span>
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../../styles/docfx.js"></script>
    <script type="text/javascript" src="../../styles/main.js"></script>
    <script id="dsq-count-scr" src="//docfx-github.disqus.com/count.js" async=""></script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-99241001-1', 'auto');
      ga('send', 'pageview');
    
    </script>
  </body>
</html>
